<template>
  <div class="feng">
    <div class="one">
      <div class="touxiang"></div>
      <div class="denglu">登录</div>
    </div>
    <div class="TOW">
      <div class="tow">
        <div>
          <div class="yulan">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
            ></el-image>
            <div>我的预览</div>
          </div>
          <div class="youhuiquan">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
              @click="youhui"
            ></el-image>
            <div>优惠券</div>
          </div>
          <div class="shoucang">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
            ></el-image>
            <div>我的收藏</div>
          </div>
        </div>
        <div>
          <div class="dizhi" @click="address">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
            ></el-image>
            <div>收货地址</div>
          </div>
          <div class="dingdan">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
              @click="refund"
            ></el-image>
            <div>我的订单</div>
          </div>
          <div class="pingjia">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
            ></el-image>
            <div>我的评价</div>
          </div>
        </div>
        <div>
          <div class="qianbao">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
              @click="money"
            ></el-image>
            <div>我的钱包</div>
          </div>
          <div class="tuihuo">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
            ></el-image>
            <div>退货</div>
          </div>
          <div class="shezhi">
            <el-image
              style="width: 70px; height: 70px"
              :src="url"
              :fit="fit"
            ></el-image>
            <div>设置</div>
          </div>
        </div>
      </div>
    </div>
    <div class="Three">&nbsp;&nbsp;&nbsp;关于我们</div>
    <div class="Four">&nbsp;&nbsp;&nbsp;联系我们</div>
    <div class="Five">&nbsp;&nbsp;&nbsp;商家入驻</div>
    <div class="yun">
      <van-tabbar v-model="active" route>
        <van-tabbar-item name="首页" icon="home-o" replace to="/zhuye"
          >首页</van-tabbar-item
        >
        <van-tabbar-item name="找药" icon="search" replace to="/zhaoyao"
          >找药</van-tabbar-item
        >
        <van-tabbar-item name="购物车" icon="shopping-cart-o" replace to="/shopping"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item name="我的" icon="user-o" replace to="/wode"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  name: "zhuye",
  data() {
    return {
      fit: "cover",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      active: "我的",
    };
  },
  methods: {
    address() {
      this.$router.push("/address");
    },
    youhui() {
      this.$router.push("/youhui");
    },
    money() {
      this.$router.push("/money");
    },
    refund(){
      this.$router.push("/refund");
    }
  },
};
</script>
<style scoped>
.feng {
  position: relative;
}
.one {
  width: 100%;
  height: 200px;
  background-color: rgb(1, 154, 254);
  position: relative;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.touxiang {
  width: 20%;
  height: 78.4px;
  border: 1px solid black;
  border-radius: 99px;
  position: absolute;
  top: 19.6px;
  left: 100px;
  right: 100px;
  margin: 0 auto;
  background-color: white;
}
.denglu {
  width: 100px;
  height: 30px;
  text-align: center;
  background-color: white;
  border-radius: 5px;
  color: rgb(1, 154, 254);
  position: absolute;
  top: 60%;
  left: 100px;
  right: 100px;
  margin: 0 auto;
}
.TOW {
  width: 90%;
  height: 315px;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  position: absolute;
  top: 170px;
  left: 5%;
}
.tow {
  margin-top: 2%;
  width: 100%;
  height: 98%;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.tow > div {
  width: 100%;
  height: 33.3%;
  display: flex;
}
.tow > div > div {
  height: 100%;
  width: 33.3%;
  /* border: 1px solid black; */
}
.Three,
.Four,
.Five {
  width: 100%;
  padding-left: 5px;
  height: 40px;
  line-height: 40px;
  /* border: 1px solid black; */
  position: absolute;
  top: 500px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.Four {
  top: 550px;
}
.Five {
  top: 600px;
}
.yun {
  position: fixed;
  bottom: 2px;
}
</style>